<template>
	
	<view>
		<view class="box">
			<!-- 搜索 -->
			<view class="search">
				<view class="address">
					<view style="display: flex;align-items: center;">
						<text
							style="font-size: 32rpx;color: #000000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width: 100rpx;height: 46rpx;"
							@tap="address">{{city||'请选择城市'}}</text>
						<image @tap="address" style="width: 18rpx; height: 10rpx; margin:0 20rpx 0 20rpx;"
							src="../../static/image/select.png" mode=""></image>
					</view>
					<u-search :disabled="true" @click="focus" :show-action="false" placeholder="搜Id/姓名/学校/专业/年级"></u-search>
					<view style="position: relative;margin-left: 45rpx;">
						<image @tap="goMessage" style="width: 42rpx; height: 38rpx;" src="/static/image/xf.png" mode="">
						</image>
						<u-badge type="error" :count="num" :offset="pos"></u-badge>
					</view>
				</view>
			</view>
			<!-- 提示 -->
			<view class="tips">
				<u-notice-bar mode="vertical" :list="list"></u-notice-bar>
			</view>
			<!-- 轮播 -->
			<view class="swiper" style="margin-top: 48rpx;">
				<u-swiper @click="goDetails()" mode="none" effect3d-previous-margin="35" border-radius="20"
					bg-color="#f7f7f7" height="323" :effect3d="true" :list="list1"></u-swiper>
				<view style="padding: 0 60rpx; ">
					<view class="Checkin">
						<view class="girl">
							<image style="margin-right: 12rpx;"
								src="https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/girl.png"
								mode=""></image>
							<view class="">
								<text>入驻教员</text>
								<p style="font-weight: bold; margin-top: 10rpx;">{{teacherNum}}</p>
							</view>
						</view>
						<view class="boy">
							<image style="margin:0 14rpx;"
								src="https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/boy.png"
								mode=""></image>
							<view class="" style=" font-size: 26rpx;color: #333333;">
								<text>入驻学员</text>
								<p style="font-weight: bold; margin-top: 10rpx;">{{studentNum}}</p>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 荔枝选师 -->
			<view class="teacher">
				<view class="xuanshi">
					<text>荔致选师</text>
					<view class="des">
						<view class="des-item">
							<image src="/static/image/rz.png" mode=""></image>
							<text>平台认证 安全放心</text>
						</view>
						<view class="des-item">
							<image src="/static/image/mrt.png" mode=""></image>
							<text>一对一教学 小课堂高效率</text>
						</view>
						<view class="des-item">
							<image src="/static/image/zgxl.png" mode=""></image>
							<text>教资水平 值得放心</text>
						</view>
						<view class="des-item">
							<image src="/static/image/rz.png" mode=""></image>
							<text>课时的费用 由您说的算</text>
						</view>
					</view>
					<view class="choose" @tap="goTeacher">
						<p>去 &nbsp;选 &nbsp;教 &nbsp;师</p>
						<image style="width: 31rpx;height: 31rpx; margin-left: 19rpx;" src="/static/image/right.png	"
							mode=""></image>
					</view>
				</view>
			</view>
			<!-- 精致教师 -->
			<view class="tabbar">
				<view class="tab">
					<view>
						<view style="margin-right: 67rpx; margin-left: 16rpx;"
							:class="currents===index ? 'one' :'another'" @click="change(index)"
							v-for="(item,index) in list2" :key="index">
							{{item.name}}
						</view>
					</view>
					<view class="more" @tap="more">
						更多
						<image style="width: 23rpx; height: 21rpx; margin-left: 10rpx;"
							src="../../static/image/more.png" mode=""></image>
					</view>
				</view>
				<view class="teacher-item" v-for="item in teacList" :key="item.id" @tap="goDetail(item.id)">
					<view class="boxs">
						<view class="left">
							<image style="width: 154rpx; height: 205rpx;border-radius: 20rpx;"
								:src="item.bareheadedPhoto" mode="scaleToFill">
							</image>
							<p>ID：{{item.code}}</p>
						</view>
						<view class="center">
							<view style="margin-bottom: 15rpx;display: flex;align-items: center;">
								<view style="font-size: 34rpx;font-weight: bold;">
									{{item.realName}}
								</view>
								<image v-if="item.gender==2" style="width: 31rpx;
							height: 31rpx; vertical-align: middle; margin-left: 17rpx;" src="/static/image/women.png" mode=""></image>
								<image v-else style="width: 31rpx;
							height: 31rpx; vertical-align: middle; margin-left: 17rpx;" src="/static/image/man.png" mode=""></image>
							</view>
								<view class="school" style="width: 300rpx;">{{item.graduateSchool}}-{{item.speciality}}</view>
							<view style="display: flex; align-items: center;position: absolute;">
								<p  class="education"
									style="font-size: 26rpx;color: #444444;">
									{{item.categoryList[item.categoryList.length-1].categoryName}}
								</p>
							</view>

							<view style="display: flex;align-items: center;margin-top: 50rpx;">
								<view :class="'grade'+ items.teachLv" class="grade"
									v-for="(items,index) in item.teacherCategoryConfigVOList">
									{{items.teachSubjectDetail}}
								</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view>
							<image style="margin-right: 7rpx;" src="/static/image/rz.png" mode=""></image>
							<text>{{item.certification?'已认证' : '未认证'}}</text>
						</view>
						<view style="margin-top: 182rpx;position: absolute; right: 50rpx;">
							<image style="margin-right: 7rpx;width: 15rpx;
						height: 19rpx;" src="/static/image/address.png" mode=""></image>
							<text style="color: #000;">{{item.distance}}</text>
						</view>
					</view>
				</view>
			</view>
	<u-empty v-if="teacList.length===0" text="列表为空" mode="list"></u-empty>
		</view>

	<!-- <tabbarLevel current="0"></tabbarLevel> -->
	</view>
	
</template>

<script>
	import lodingHtml from '@/common/home/index.vue'
	// import tabbarLevel from '@/components/tabbar/tabbar.vue'
	import QQMapWX from '@/common/qqmap-wx-jssdk1.1/qqmap-wx-jssdk.min.js'
	export default {
		components: {
			// tabbarLevel,
			lodingHtml
		},
		data() {
			return {
				lodingShow: false,
				pos: [-10, -20],
				list: [
					'1 分钟前用户LONG成功预约王教师!1分钟前用户拷贝'
				],
				list1: [],
				list2: [{
					name: '最新'
				}, {
					name: '附近'
				}],
				currents: 0,
				pageCurrent: 1,
				pageSize: 10,
				queryType: 1,
				pageTotal: 0,
				lat: '',
				lgt: '',
				teacList: [],
				teachSubject: [],
				city: '',
				cityId: '',
				num: '',
				studentNum: '',
				teacherNum: '',
				distance: []
			}
		},
		onShareAppMessage() {
			return {
				title: '荔致分享',
				path: '/pages/home/homeIndex',
				imgUrl: ''
			}
		},
		onShareTimeline() {
			return {
				title: '荔致分享',
				path: '/pages/home/homeIndex',
				imageUrl: ''
			};
		},
		onShow() {
			console.log('当前筛选条件====',this.vuex_sel)
			this.city = uni.getStorageSync('city')
			const vm = this
			// vm.lodingShow = true


			// vm.teacList = []
			vm.pageCurrent = 1
			vm.getCity()


			vm.lat = uni.getStorageSync('lat')
			vm.lgt = uni.getStorageSync('lgt')
			if (this.vuex_hasLogin) {
				vm.getNoticeNum()
				vm.getInfo()
			}

			vm.getHome()
			// setTimeout(function() {
			// 	vm.lodingShow = false
			// }, 	200)
			// vm.lodingShow = false
		},
		onLoad() {
			let obj = {}
			obj.subjectId = ''
			obj.subjectName = ''
			obj.stageId = ''
			obj.stageName = ''
			obj.keyword = ''
			this.$u.vuex('vuex_select', obj)
			this.getLoaction()
			// this.getNotice()
			this.getBanner()
		},
		created() {

		},
		onPullDownRefresh() {
			this.$u.vuex('vuex_select', {})
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.getTeachPage();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			goTeacher(){
				uni.switchTab({
					url:'/pages/contradict/contradict'
				})
			},
			getInfo() {
				this.$u.api.myInfo().then(data => {
					this.$u.vuex('vuex_user', data)
				})
			},
			more() {
				// uni.navigateTo({
				// 	url: '/pages/contradict/saixuan?types=1'
				// })
				uni.switchTab({
					url:'/pages/contradict/contradict'
				})
			},
			async getNoticeNum() {
				this.num = await this.$u.api.getNoticeNum()
			},
			async getCity() {

				const res = await this.$u.api.getCity({
					cityName: this.city
				})
				console.log(res);
				this.cityId = res[0].code
				this.pageCurrent = 1
				this.getTeachPage()
				// const resq = await this.$u.api.getQuyu({
				// 	parentId: res[0].id
				// })
				// this.leibie = resq
			},
			getLoaction() {
				console.log(1111111);
				let that = this
				uni.getLocation({
					type: 'wgs84', //wgs84 地球坐标 (WGS84)  火星坐标 (GCJ-02)也叫国测局坐标系
					success: function(res) {
						console.log(res, '55555555555');
						let qqmapsdk = new QQMapWX({
							key: 'C5XBZ-R2TWZ-2H7XC-7PUCR-LZAH3-FXB5G'
						});
						uni.setStorageSync('lat', res.latitude)
						uni.setStorageSync('lgt', res.longitude)
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: (re) => {
								console.log('5654446', re); //这里定位数据
								that.$u.vuex('vuex_location', re.result.ad_info.city)
								that.city = re.result.ad_info.city
								that.lat = uni.getStorageSync('lat')
								that.lgt = uni.getStorageSync('lgt')
								that.getCity()
								that.getTeachPage()
								uni.setStorageSync('city', re.result.ad_info.city)
								uni.setStorageSync('citys', re.result.ad_info.city)
								uni.setStorageSync('province', re.result.ad_info.province)
							},
						})

					},
					fail(q) {
						console.log(q, 'qqqqqq');
					}

				});
			},

			async getHome() {
				const res = await this.$u.api.getHome({
					lat: this.lat,
					lgt: this.lgt
				})
				this.studentNum = res.studentNum
				this.teacherNum = res.teacherNum
				this.list = res.headRotational
			},
			async getBanner() {
				const res = await this.$u.api.getBanner({
					bannerCode: 'PlUS_BANNER_PARENT'
				})
				this.list1 = res
				this.list1.map(item => {
					item.image = item.picture
				})
			},
			change(index) {
				uni.showLoading({
					title: '加载中'
				})
				this.currents = index;
				this.queryType = index + 1
				// this.teacList = []
				this.pageCurrent = 1
				this.getTeachPage()
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
			},
			focus() {
				uni.navigateTo({
					url: '/pagesShop/search/search?lat='+this.lat+'&lgt='+this.lgt+'&cityId='+this.cityId
				})
			},
			address() {
				uni.navigateTo({
					url: '/pagesShop/address/address'
				})
			},
			goDetails(index) {
				console.log(this.list1[index].id);
				const id = this.list1[index].id
				uni.navigateTo({
					url: `/pages/home/bannerDetail?id=${id}`
				})
			},
			goMessage() {
				uni.navigateTo({
					url: '/pages/home/message'
				})
			},
			async getTeachPage() {
				const res = await this.$u.api.getTeachPage({
					current: this.pageCurrent,
					size: this.pageSize,
					queryType: this.queryType,
					lat: this.lat,
					lgt: this.lgt,
					memberId: this.vuex_user.id || '',
					keyword: '',
					gender: this.vuex_sel.gender || '',
					subjectId: this.vuex_sel.subjectId || '',
					teacherType: this.vuex_sel.teacherType || '',
					cityId: this.vuex_sel.cityId || this.cityId,
					countyId: this.vuex_sel.countyId || '',

				})
				if (this.pageCurrent == 1) {
					this.teacList = []
				}

				this.teacList = this.teacList.concat(res.records)
				this.teacList.map(item => {
					if (item.distance >= 1000) {
						item.distance = (item.distance / 1000).toFixed(2) + 'km'
					} else if (item.distance < 1000) {
						item.distance = item.distance + 'm'
					}
				})

				// this.distance = this.teacList.map(item=>{
				// 	if(item.distance>1000){
				// 		return (item.distance/1000).toFixed(2) + 'km'
				// 	}else{
				// 		return item.distance + 'm'
				// 	}
				// })
				this.pageTotal = res.pages
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/contradict/teacherDetail?teacherId=${id}`
				})
			}
		},
		onReachBottom() {
			if (this.pageCurrent < this.pageTotal) {
				this.pageCurrent += 1;
				this.getTeachPage()

			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	/deep/.u-search {
		width: 458rpx !important;
	}

	.box {


		.search {
			padding: 0 30rpx;

			.address {
				display: flex;
				align-items: center;

				// /deep/.u-content {
				// 	width: inherit;
				// }
			}
		}

		.tips {
			padding: 0 30rpx;
			margin-top: 39rpx;

			/deep/.u-notice-bar {
				background: #FFE8E0 !important;
				border-radius: 36rpx !important;
			}

			/deep/.u-type-warning {
				color: #000000 !important;
			}
		}

		.swiper {
			.Checkin {
				display: flex;
				position: relative;
				box-sizing: border-box;
				width: 630rpx;
				bottom: 23rpx;
				padding: 15rpx 40rpx;
				height: 120rpx;
				background: #FFFFFF;
				border: 1px solid #EEEEEE;
				box-shadow: 0rpx 8rpx 43rpx 0rpx rgba(145, 145, 145, 0.18);
				border-radius: 60rpx;

				image {
					width: 90rpx;
					height: 90rpx;
				}

				.girl {
					width: 273rpx;

					display: flex;
					align-items: center;

					view {
						text-align: center;
					}

					&::after {
						content: "";
						width: 1rpx;
						height: 69rpx;
						background: #DCDCDC;
						// margin-left: 70rpx;
						position: absolute;
						right: 54%;
					}

					view {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}

				.boy {
					width: 273rpx;

					display: flex;
					align-items: center;

					view {
						text-align: center;
					}
				}
			}
		}

		.teacher {
			margin-top: 20rpx;

			.xuanshi {
				padding: 38rpx 60rpx 57rpx 56rpx;
				text-align: center;
				height: 450rpx;
				background-repeat: no-repeat;
				background-size: cover;
				background-image: url('');

				text {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}

				.des {
					margin-top: 75rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					// justify-content: space-between;
					.des-item {
						margin-right: 40rpx;
						margin-bottom: 40rpx;

						image {
							width: 34rpx;
							height: 34rpx;
							vertical-align: middle;
							margin-right: 9rpx;
						}

						text {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #333333;
						}

						&:nth-child(2n) {
							margin-right: 0;
						}
					}
				}

				.choose {
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto;
					width: 454rpx;
					height: 86rpx;
					line-height: 86rpx;
					background-repeat: no-repeat;
					background-size: cover;
					background-image: url('');

					p {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
			}
		}

		.tabbar {
			padding: 0 30rpx 30rpx;

			.tab {
				margin-top: 22rpx;

				display: flex;
				align-items: center;
				justify-content: space-between;

				view {
					display: flex;
					align-items: center;

					.one {
						width: 67rpx;
						text-align: center;
						position: relative;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FF6054;

						&::after {
							content: '';
							width: 67rpx;
							height: 5rpx;
							background: linear-gradient(-90deg, #FF8D5F, #FF6A55);
							border-radius: 3rpx;
							position: absolute;
							bottom: -11rpx;
							left: -10rpx;
						}
					}

					.another {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}

				.more {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

			}

			.teacher-item {
				display: flex;
				justify-content: space-between;
				margin-top: 40rpx;
				padding: 0 20rpx 0 32rpx;
				height: 320rpx;
				background: #FFFFFF;
				border-radius: 35rpx;

				.boxs {
					display: flex;

					.left {
						text-align: center;
						margin-top: 30rpx;
						margin-right: 30rpx;

						p {
							margin-top: 20rpx;
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
						}
					}

					.center {
						margin-top: 40rpx;

						// view {
						// 	font-size: 34rpx;
						// 	font-weight: bold;
						// 	color: #323232;
						// 	display: flex;
						// 	align-items: center;

						// }
						.school{
							color: #999;
							font-size: 26rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						p {
							margin-top: 10rpx;
							font-size: 26rpx;
							font-weight: 500;
							color: #9D9D9D;
						}

						.grade {
							margin-top: 19rpx;
							width: 90rpx;
							height: 35rpx;
							line-height: 35rpx;
							padding-left: 12rpx;

							border-radius: 5rpx;
							font-size: 18rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
							margin-right: 10rpx;
							background: #ffbf55;
						}

						.grade18 {
							background: #ffbf55;
						}

						.grade19 {
							background: #be57ff;
						}

						.grade20 {
							background: #6a57ff;
						}
					}
				}


				.right {

					margin-top: 56rpx;

					view {
						display: flex;
						align-items: center;

						image {
							vertical-align: middle;
							width: 25rpx;
							height: 25rpx;
						}

						text {
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #FF6054;
						}
					}

				}
			}
		}
	}
</style>